<template>
  <h4>----------D----------</h4>
  <div class="d">
    姓:<input type="text" v-model="firstName">
    <br>
    名:<input type="text" v-model="lastName">
    <br>
    全名-readOnly:<span>{{ fullName }}</span>
    <br>
    全名-write:<span>{{ fullName2 }}</span>
  </div>
</template>

<script setup lang="ts" name="D">
import { ref, computed } from "vue"
let firstName = ref('liu')
let lastName = ref('cong')

// 当依赖项变化，才重新计算，【readOnly】
//! 自带缓存，理解为useMemo，useCallback
let fullName = computed(() => {
  return firstName.value.slice(0, 1).toLocaleUpperCase() + firstName.value.slice(1) + '-' + lastName.value
})

// 这样定义，【可读可写】
let fullName2 = computed({
  get() {
    return firstName.value.slice(0, 1).toLocaleUpperCase() + firstName.value.slice(1) + '-' + lastName.value
  },
  set(val) {
    // 赋值
    let [first, last] = val.split('-')
    firstName.value = first.slice(0, 1).toLocaleLowerCase() + first.slice(1)
    lastName.value = last
  }
})
</script>

<style></style>
